@import "../../global-connect";

.v-command {
  padding-top: 2px;

  .op-link[aria-disabled=true] {
    color: #d9d9d9 !important;

    &:hover {
      cursor: not-allowed;
      border: none;
    }
  }

  .op-link {
    background-color: white;

    padding-top: 2px;
    display: inline-block;
    text-align: center;

    &:hover {
      border-radius: 3px;
    }

    .ix-box.square(24px);

    .ix-text.hover-invert(#eb2f95);

    &:first-child {
      .ix-text.hover-invert(@color-button-brown)
    }

    &:last-child {
      .ix-text.hover-invert(#5dcd52)
    }

    i, svg {
      .ix-box.square(18px);
    }
  }
}

.t-command {
  .op-link[aria-disabled=true] {
    color: #d9d9d9 !important;

    &:hover {
      cursor: not-allowed;
      border: none;
    }
  }

  .op-link {
    position: absolute;
    top: 0;
    left: -14px;

    padding: 2px 2px 0 2px;
    border: solid 1px white;
    display: inline-block;
    text-align: center;

    background-color: #ECECEC;
    background-image: linear-gradient(0deg, hsla(0, 0%, 100%, .3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0),
    linear-gradient(0deg, white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0);
    background-size: 5px 5px;

    &:hover {
      border-radius: 3px;
      border: solid 1px #8C8C8C;
    }

    svg {
      .ix-box.square(22px);
    }
  }
}

.c-command {
  float: right;

  .op-link[aria-disabled=true] {
    color: #d9d9d9 !important;

    &:hover {
      cursor: not-allowed;
      border: none;
    }
  }

  .op-link {
    display: inline-block;
    text-align: center;

    &:hover {
      border-radius: 3px;
    }

    .ix-box.square(22px);

    .ix-text.hover-border(#1874CD);

    &:first-child {
      .ix-text.hover-border(@color-button-brown);
    }

    &:last-child {
      .ix-text.hover-border(#eb2f95);
    }

    i, svg {
      .ix-box.square(18px);
    }
  }
}

.e-command {
  width: 27px;
  padding-top: 1px;
  background-color: white;

  .op-link[aria-disabled=true] {
    color: #d9d9d9 !important;

    &:hover {
      cursor: not-allowed;
      border: solid 1px white;
    }
  }

  .op-link {
    display: inline-block;
    text-align: center;
    padding-top: 1px;

    &:hover {
      border-radius: 3px;
    }

    .ix-box.square(24px);

    .ix-text.hover-border(#1874CD);

    &:first-child {
      .ix-text.hover-border(#5dcd52)
    }

    i, svg {
      .ix-box.square(18px);
    }
  }
}